<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>修改手机</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<style>
			.whole {
				margin-top: 15px;
				width: 100%;
				background: #ffffff !important;
			}
			
			#sub {
				margin: 30px 0;
				width: 100%;
			}
			
			.change {
				margin: 0;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">修改手机</h1>
		</header>

		<!--修改手机-->
		<div class="mui-content id">
			<div class="whole">
				<form class="mui-input-group" action="1">
					<div class="mui-input-row">
						<label class="name pwd">原手机</label>
						<input type="text" class="mui-input-clear n_name" id="phone" placeholder="请输入原手机">
					</div>
					<div class="mui-input-row">
						<label class="name">验证码</label>
						<input type="text" class="n_name code" id="code" placeholder="请输入验证码">
						<button type="button" class="mis mui-btn mui-btn-outlined" id="J_resetCode">获取验证码</span></button>
					</div>
					<div class="mui-input-row">
						<label class="name">新号码</label>
						<input type="text" class="mui-input-clear n_name" id="too_phone" placeholder="请输入新手机号码">
					</div>
					<div class="change">
						<button type="button" id="sub" class="mui-btn mui-btn-blue">修改</button>
					</div>
				</form>

			</div>
		</div>

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			/*验证码*/
		/*获取验证码*/
	    var isPhone = 1;
	    $('#J_resetCode').click(function(){
	        checkPhone(); //验证手机号码
	        if(isPhone){
	            resetCode(); //倒计时
	            get_code()
	        }else{
	            $('#phone').focus();
	        }
	    })
	    //验证手机号码
	    function checkPhone(){
	        var phone = $('#phone').val();
	        var pattern = /^1[0-9]{10}$/;
	        isPhone = 1;
	        if(phone == '') {
	            mui.toast('请输入手机号码')
	            isPhone = 0;
	            return;
	        }
	        if(!pattern.test(phone)){
	            mui.toast('请输入正确的手机号码')
	            isPhone = 0;
	            return;
	        }
	    }
	    //倒计时
	    function resetCode(){
	        var second = 60;
	        var timer = null;
	        $('#J_resetCode').attr('disabled',true);
	        timer = setInterval(function(){
	            second -= 1;
	            if(second >0 ){
	        		$('#J_resetCode').html(`${second}秒后重发`);
	            }else{
	        		$('#J_resetCode').attr('disabled',false);
	                clearInterval(timer);
	        		$('#J_resetCode').html('获取验证码');
	            }
	        },1000);
	    }
	    
	    //ajax获取验证码
	    function get_code(){
	    	
	    }
			
			/*验证是否全部输入*/
			var phone = document.getElementById('phone');
			var too = document.getElementById('too_phone');
			var sub = document.getElementById('sub');
			var code =document.getElementById('code');
			sub.onclick = function(){
				var check = true;
				var reg = /^1\d{10}$/;
				var tb = phone.value;
				var tt = too.value;
				var codee = code.value;
				if(too == ''){
					mui.toast('请输入新手机号码');
					check = false;
			    	return false;
				}
				if(tb == ''){
					mui.toast('请输入手机号');
					check = false;
			    	return false;
				}
				if(codee == ''){
					mui.toast('请输入验证码');
					check = false;
			    	return false;
				}
				if(!reg.test(tb)){
					mui.toast('请输入正确的手机格式');
					check = false;
			    	return false;
				}
				if(!reg.test(tt)){
					mui.toast('请输入正确的手机格式');
					check = false;
			    	return false;
				}
				if(check){
					$('form').submit()
				}
			}
		</script>
	</body>

</html>